<template>
	<!-- 产品库 -->
	<view class="cpk-list">
		<view class="row" v-for="(item, index) in cpkData" :key="index" @click="handleClick(item)">
			<view class="left">
				<image :src="item.logo" mode="aspectFit"></image>
			</view>
			<view class="right">
				<view class="title">{{ item.name }}</view>
				<view class="row1">年化率：<text>{{ item.annualInterestRate }}</text></view>
				<view class="row">
					<view class="block">
						<view class="block-top">额度：</view>
						<view class="block-bottom">{{ item.creditLimit }}</view>
					</view>
					<view class="block">
						<view class="block-top">通过率：</view>
						<view class="block-bottom">{{ item.passRate }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Cpk",
		data() {
			return {

			};
		},
		props: {
			cpkData: {
				type: Array,
				default: () => []
			}
		},
		methods: {
			handleClick(item) {
				// 检查登录状态
				// if (!this.$store.state.user.isLoggedIn) {
				// 	uni.showToast({
				// 		title: '请先登录',
				// 		icon: 'none'
				// 	});
				// 	// 跳转到登录页面
				// 	setTimeout(() => {
				// 		uni.redirectTo({
				// 			url: '/pages/login/login'
				// 		});
				// 	}, 1500);
				// 	return;
				// }
				uni.navigateTo({
					url: `/pages/knowledge-base-details/knowledge-base-details?guid=${item.id}`
				});
			}
		}
	}
</script>

<style lang="less">
	.cpk-list {
		padding: 10rpx 30rpx 20rpx;

		.row {
			position: relative;
			display: flex;
			padding: 20rpx 0 20rpx;

			.left {
				flex-shrink: 0;
				height: 160rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;

				image {
					width: 160rpx;
					height: 160rpx;
				}

			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-left: 30rpx;

				.title {
					font-size: 32rpx;
					color: #000;
					font-weight: bold;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-top: 8rpx;
				}
				.row1{
					display: flex;
					flex-wrap: nowrap;
					color: #666;
					font-size: 28rpx;
					margin-top: 25rpx;
					text {
						color: #000;
						font-size: 26rpx
					}
				}

				.row {
					display: flex;
					justify-content: space-between;
					margin-top: 2rpx;
                    padding: 10rpx 0 20rpx;
					.block {
						position: relative;
						flex: 0 0 50%;
						display: flex;
						align-items: center;

						&::after {
							content: '';
							position: absolute;
							right: 0;
							top: 10rpx;
							bottom: 10rpx;
							width: 1rpx;
						}

						.block-top {
							color: #666;
							font-size: 28rpx;
						}

						.block-bottom {
							color: #000;
							font-size: 26rpx;
						}

						&:first-child {
							align-items: flex-start;

							&::after {
								background-color: #F9E0C7;
							}

						}

						&:nth-child(2) {
							align-items: center;

							&::after {
								background-color: #F9E0C7;
							}
						}

						// &:last-child {
						// 	align-items: flex-end;
						// }
					}
				}

			}
		}
	}
</style>